@mixin nosel {
  background: #00aeff;
}

// 未选中的颜色
$noselColor: #00aeff;
// 未选中时的边框颜色
$noselBgc: #3b8bff;
//  选中时的颜色
$selectedColor: #00e1e4;
// table的颜色
$tableColor: #00e3e4;
#app.dark-theme {
  background: url(../images/dark/bg.png) no-repeat !important;

  // 最外层
  .main-container {
    //background: #061540 !important;
    background: url(../images/dark/bg.png) no-repeat 0 0 !important;
    background-size: cover;

    .title {
      color: #fff !important;
      background: transparent !important;
    }
  }

  // 次外层
  .app-container {
    //background: rgba($color: $noselBgc, $alpha: 0.1) !important;
    background: transparent !important;
    border: 1px solid rgba($color: $noselBgc, $alpha: 0.4);

    .container {
      background: transparent !important;
    }
  }

  .app-main {
    //background: url(../images/dark/bg.png) no-repeat !important;
    background: rgba($color: $noselBgc, $alpha: 0.1) !important;
    border: 1px solid rgba($color: $noselBgc, $alpha: 0.4);

    .data-container {
      border: 0;
      background:transparent !important;
    }

    .app-container {
      border: 0;
    }
  }
  
  .data-container {
    background: rgba($color: $noselBgc, $alpha: 0.1) !important;
    border: 1px solid rgba($color: $noselBgc, $alpha: 0.4);

    .data-bottom,
    .data-top {
      background: transparent !important;
    }
    .data-left,.data-right,.data-container-bottom{
      background: rgba(59,139,255,0.10);
    }
    .data-container-top{
      background:transparent !important;
    }
  }
  

  //  首页
  .data-detail-box,
  .data-count-num-list {
    background: rgba($color: $noselBgc, $alpha: 0.1);
    color: rgba($color: $noselColor, $alpha: 1);
  }

  .data-detail-title,
  .unit,
  .data-title > h3,
  .data-tabs-list,
  .fontcolor-blue,
  .data-count-num-list,
  .el-radio,
  .el-range-separator {
    color: #fff !important;
  }

  // 选择器下部分
  & ~ .el-picker-panel {
    color: #fff;

    .el-date-picker__header {
      .el-picker-panel__icon-btn, .el-date-picker__header-label {
        color: #fff;
      }

    }

    .el-date-table {
      th {
        color: #fff;
        border-color: rgba($color: $noselBgc, $alpha: 0.4);
      }

      td.in-range div {
        background-color: rgba($color: $selectedColor, $alpha: 0.6);
      }

      td.start-date span,
      td.end-date span,
      td.current:not(.disabled) span {
        background: $selectedColor;
      }

      td.next-month,
      td.prev-month {
        color: #617898;
      }
    }
  }

  // 下拉框格式
  & ~ .el-popper {
    background: #081641;
    border: 1px solid rgba($color: $selectedColor, $alpha: 0.4);

    .el-select-dropdown__item.hover,
    .el-dropdown-menu__item:hover, .el-select-dropdown__item.is-disabled:hover {
      background-color: rgba($color: $noselColor, $alpha: 0.2);
    }

    .el-select-dropdown__item,
    .el-dropdown-menu__item {
      color: rgba($color: #fff, $alpha: 0.8);
    }

    .el-select-dropdown__item.selected,
    .el-dropdown-menu__item.selected {
      color: $selectedColor;
    }

    .popper__arrow {
      display: none;
    }

    .el-dropdown-menu__item--divided {
      border: none;

      &:before {
        display: none;
      }
    }

    // 级联选择器样式
    .el-cascader-menu {
      color: #fff;
      border-color: rgba($color: $selectedColor, $alpha: 0.4);

      .el-cascader-node:not(.is-disabled):hover {
        background: rgba($color: $selectedColor, $alpha: 0.4);
      }

      .el-cascader-node.in-active-path,
      .el-cascader-node.is-active,
      .el-cascader-node.is-selectable.in-checked-path {
        color: $selectedColor;
        background: transparent;
      }
    }
  }


  // 左侧筛选器样式
  .container-box .page-container .left-container {
    border: 1px solid rgba($color: $noselBgc, $alpha: 0.4);

    .choose-header .reset {
      color: #fff;
    }

    .tree-box {
      .title {
        background: rgba($color: $selectedColor, $alpha: 0.4) !important;
        color: $selectedColor !important;
      }

      .group {
        background: rgba($color: $noselBgc, $alpha: 0.1);

        .node .con {
          color: #fff;

          span:nth-of-type(2) {
            color: $selectedColor !important;
          }
        }
      }
    }
  }

  .form-header {
    border-bottom-color: rgba($color: $noselBgc, $alpha: 0.4);
  }
  .t-title{
    background: rgba($color: $noselBgc, $alpha: 0.5);
    color:#fff;
  }

  .preset-log .header, .configuration-situation .left, .configuration-situation .right, .file-behavior, .configuration-situation,.timeline-count,.headtext ,.thing{
    background: rgba(59, 139, 255, .1) !important;
    border: 1px solid rgba(59, 139, 255, .4)
  }
  .content-wk,.footer{
    background:transparent !important;
  }
  .headtext>div{
    padding:0 !important;
  }
  .headtext:nth-child(1)>div{
    padding-left:20px !important;
  }
  .data-cont-img p, .el-icon-arrow-left, .tab .tablist span, .title, .ntips, .configuration-situation .left, .configuration-situation .right,.timeline-count ,.tabs span,.back span,.right-btn span,.con-title,.l-bottom p{
    color: #fff !important;
  }
  .l-value{
    color:#00aec2;
  }
  .el-collapse-item,.custom-portrait .component-container .drawcontainer .back{
    border-bottom:1px solid transparent;
  }
  .el-collapse{
   border-top: 1px solid #3B8BFF !important;
    border-bottom: 1px solid #3B8BFF !important
  }

}


// 公共样式
#app.dark-theme,
#app.dark-theme ~ .el-dialog__wrapper,
#app.dark-theme ~ .el-message-box__wrapper {
  .el-dialog {
    background: #092253;
    .timeline-container{
      background: rgba(59,139,255,0.10) !important;
    }
    .el-dialog__header {
      border-bottom: 1px solid rgba(0, 225, 228, 0.2);

      .el-dialog__title {
        color: $selectedColor;
      }
    }

    .el-dialog__body {
      color: #fff;
    }

    .el-dialog__footer {
      border-top: 1px solid rgba(0, 225, 228, 0.2);
    }

    // 邮件对话框样式
    .email-dia {
      aside {
        background: transparent;
        border-color: rgba($color: $selectedColor, $alpha: 0.2);

        .option-group {
          li {
            color: #fff;
          }

          li.activeLink {
            border-right: 2px solid $selectedColor;
            background: rgba($color: $selectedColor, $alpha: 0.4);
            color: #fff;
          }
        }
      }
    }
  }

  // 加载时遮罩层样式
  .el-loading-mask {
    background: #061540;
  }


  // tag样式
  .el-tag {
    background: rgba($color: $selectedColor, $alpha: 0.4);
    color: #fff;
    border: none;

    &.el-tag--danger {
      background: rgba($color: #ffdbdb, $alpha: 0.9);
      color: #ff4949;
    }
  }

  // 文本域样式
  .el-textarea {
    .el-input__count {
      background: transparent;
      color: #fff;
    }
  }

  // switch样式
  .el-switch {
    &.is-checked .el-switch__core {
      background: rgba($color: $selectedColor, $alpha: 0.4);
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.6);
    }

    .el-switch__core {
      background: rgba(0, 225, 228, 0);
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.6);
    }
  }

  // 分页器样式
  .el-pagination {
    display: flex;
    align-items: center;
    color: rgba($color: #fff, $alpha: 0.8);
    // 总计的样式
    .el-pagination__total {
      color: #fff;
    }

    // 跳转的样式
    .el-pagination__jump {
      color: #fff;
    }

    // 分页器的前后样式
    .btn-next,
    .btn-prev {
      background: rgba($color: $noselBgc, $alpha: 0.2);
      border: 1px solid $noselBgc;
    }

    // 分页器的选中按钮的样式
    &.is-background .el-pager li:not(.disabled).active {
      background: rgba($color: $selectedColor, $alpha: 0.4) !important;
      border: 1px solid $selectedColor !important;
    }

    // 分页器按钮样式
    .el-pager li {
      background: rgba($color: $noselBgc, $alpha: 0.2);
      border: 1px solid rgba($color: $noselBgc, $alpha: 0.6);
      color: rgba($color: #fff, $alpha: 0.8);
    }
  }

  // 搜索框样式
  .el-input__inner {
    background: transparent;
    border: 1px solid rgba($color: $selectedColor, $alpha: 0.4);
    border-radius: 4px;
    color: #fff;

    &:hover {
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.4) !important;
    }
  }

  .el-row, .el-col {
    color: #fff
  }

  // 单选框
  .el-radio,
  .el-radio-group {
    color: #fff;

    .el-radio__input.is-checked .el-radio__inner,
    .el-radio__inner,
    .el-range-editor--medium,
    .el-range-editor--medium .el-range-input {
      background: transparent;
    }

    .el-radio__input.is-checked .el-radio__inner {
      border-color: $selectedColor;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: $selectedColor;
    }

    .el-radio__inner {
      border: 1px solid $noselColor;
    }

    .el-radio-button__inner {
      background: rgba($color: $noselBgc, $alpha: 0.4);
      border: 1px solid rgba($color: $noselBgc, $alpha: 1);
      color: #fff;
    }

    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: rgba($color: $selectedColor, $alpha: 0.6);
      border-color: transparent;
    }

    .el-radio-button__inner {
      border-color: transparent;
    }
  }

  // 复选框样式
  .el-checkbox {
    .el-checkbox__inner {
      background: #152a62;
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.6);
      border-radius: 2px;
    }

    &.is-checked {
      .el-checkbox__inner {
        background: rgba($color: $selectedColor, $alpha: 0.4);
        border: 1px solid $selectedColor;
        color: $selectedColor;
      }
    }

    .el-checkbox__input {
      &.is-checked + .el-checkbox__label {
        color: $selectedColor;
      }
    }

    .el-checkbox__label {
      color: #fff;
    }
  }

  // 表单样式

  .el-form--inline, .el-form-item__label {
    color: #fff;
  }

  .el-textarea {
    input:hover {
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.4) !important;
    }

    .el-textarea__inner {
      background: transparent;
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.4);
      border-radius: 4px;
      color: #617898;
    }
  }

  // 修改button颜色
  button.el-button.el-button--primary {
    color: #ffffff !important;
    background: rgba($color: $selectedColor, $alpha: 0.4) !important;
    border: 1px solid $selectedColor !important;

    &.is-disabled {
      background: rgba($color: #a9c9ff, $alpha: .5) !important;

    }
  }

  button.el-button.el-button--default {
    color: #ffffff !important;
    background: rgba($color: $noselBgc, $alpha: 0.4) !important;
    border: 1px solid rgba($color: $noselBgc, $alpha: 1) !important;
  }

  .el-button--text {
    color: $noselColor;

    &.is-disabled {
      color: #C0C4CC;
    }
  }

  // 输入框样式
  .el-input {
    input:hover {
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.4) !important;
    }

    &.is-focus {
      .el-input__inner {
        border-color: $selectedColor !important;
      }
    }
  }

  // 加减器按钮
  .el-input-number__increase,
  .el-input-number__decrease {
    background: transparent;
    border-color: rgba($color: $selectedColor, $alpha: 0.5);
    color: #fff;
  }

  // 下拉框选中的样式
  .el-select .el-input .el-input__inner {
    color: $selectedColor;
  }

  // 树形选择器样式
  .vue-treeselect__control {
    background: transparent;

    border-color: $selectedColor;

    .vue-treeselect__single-value {
      color: #fff;
    }
  }

  .ntips,
  .tips {
    color: #fff;
  }

  .el-table--border .el-table__cell {
    border-right: none;
  }

  // 表格样式
  .el-table {

    color: rgba($color: #fff, $alpha: 0.8);
    background-color: transparent;
    // 颜色设置透明色
    .el-table__expanded-cell {
      background: transparent;
    }

    th.el-table__cell {
      background: transparent;
    }

    // 头部
    thead.has-gutter {
      background: rgba($color: $noselBgc, $alpha: 0.2) !important;

      & > tr > th {
        border-bottom: 1px solid $noselBgc !important;
        background: rgba($color: $noselBgc, $alpha: 0.2) !important;
      }
    }

    .el-table__expand-icon {
      color: #fff;
    }

    // 去掉边框线和底色
    th,
    tr {
      background-color: transparent;
    }

    // 表头样式
    .el-table__header-wrapper th {
      color: rgba($color: #fff, $alpha: 0.8);
    }

    // 表格体样式
    .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba($color: $noselBgc, $alpha: 0.1);
    }

    // 固定的行的样式
    .el-table__header-wrapper th,
    .el-table__fixed-header-wrapper th {
      color: rgba($color: #fff, $alpha: 0.8);
      background: transparent !important;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
      display: none;
    }

    // 每行的下边框样式
    td.el-table__cell {
      border-bottom: 1px solid rgba($color: $noselBgc, $alpha: 0.4);
      // 去掉最下面的线
      &.el-table__expanded-cell {
        border-bottom: none;
      }
    }

    // 去掉hover背景色
    tbody tr:hover > td {
      background-color: rgba($color: $noselBgc, $alpha: 0.1) !important;
      border: 1px solid $tableColor !important;
      border-left: none !important;
      border-right: none !important;

      &:first-of-type {
        border-left: 1px solid $tableColor !important;
      }

      &:last-of-type {
        border-right: 1px solid $tableColor !important;
      }
    }

    // 如果td没有颜色，可以去掉，这里加上保险
    .el-table__body tr.hover-row > td {
      background-color: rgba($color: $noselBgc, $alpha: 0.1);
    }

    // 固定列的样式
    .el-table__fixed,
    .el-table__fixed-right {
      background: rgba($color: #152a62, $alpha: 1);

      th.el-table__cell.is-leaf {
        border-bottom: 1px solid $noselBgc;
        background: rgba($color: $noselBgc, $alpha: 0.3) !important;
      }
    }
  }

  // 通用的边框样式
  .el-input__inner {
    background: transparent;
    border: 1px solid rgba($color: $selectedColor, $alpha: 0.4);
    border-radius: 4px;
    color: #617898;

    &:hover {
      border: 1px solid rgba($color: $selectedColor, $alpha: 0.4) !important;
    }
  }

  // 范围选择器样式
  .el-range-editor.is-active {
    border: 1px solid rgba($color: $selectedColor, $alpha: 0.4) !important;
  }

  .el-date-editor .el-range-input {
    color: $selectedColor;
  }

  // 时间选择器样式
  .el-picker-panel {
    color: #fff;
  }

  // tab选项卡样式
  .el-tabs__item {
    color: #fff;
  }

  .el-tabs--border-card, .el-tabs--border-card > .el-tabs__header {
    background: transparent !important;
    border-left: none !important;
  }

  .el-tabs__nav-wrap::after {
    background: rgba($color: $noselBgc, $alpha: 0.4) !important;
  }

  .el-tabs__item.is-active {
    color: $selectedColor !important;
  }

  .el-tabs__active-bar {
    background: rgba($color: $selectedColor, $alpha: 0.4) !important;
  }

  .el-tabs--left .el-tabs__item.is-left {
    background: rgba($color: $noselBgc, $alpha: 0.4) !important;
  }


  // 富文本编辑器
  .ql-snow {
    border-color: rgba($color: $selectedColor, $alpha: 0.4);
    // 选择框
    .ql-picker, .ql-stroke, .ql-fill {
      stroke: #fff;
      color: #fff;
    }

  }

  // 进度步骤样式
  .el-step {
    .el-step__line {
      background: rgba($color: $noselBgc, $alpha: 0.4);
    }

  }

  // 去掉el-tree选中时的状态
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
    background: rgba(0, 225, 228, 0.1);
    color: #fff;
  }

  // 树形结构
  .tree-border {
    border: none;
  }

  .el-tree {
    background: rgba($color: $noselBgc, $alpha: 0.1);
    color: #fff;

    // 触碰时的颜色
    .el-tree-node:focus > .el-tree-node__content,
    .el-tree-node__content:hover {
      background: rgba(0, 225, 228, 0.1);
    }

    // 图标颜色
    .el-tree-node__content > .el-tree-node__expand-icon {
      color: $selectedColor;
    }

    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }

    // 选中时的颜色
    &.el-tree--highlight-current > .el-tree-node > .el-tree-node__content,
    & > .el-tree-node > .el-tree-node__content {

      color: $selectedColor;
    }
  }

  .el-upload-dragger {
    background: transparent;
  }

  /* 滚动条上的滚动滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #102471;
    border-radius: 32px;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 32px;
  }

  .vue-treeselect__menu {
    background: #022d5c !important;
  }

  /* 下拉树选择器背景色修改 */
  .vue-treeselect--single .vue-treeselect__option--selected, .vue-treeselect--single .vue-treeselect__option--selected:hover {
    background: #00aec2 !important;
    color: #fff;
  }

  .vue-treeselect--single .vue-treeselect__option--selected:hover, .vue-treeselect__option--highlight {
    background: #00aec2 !important;
    color: #fff;
  }
}

// 图标选中
#app.dark-theme ~ .el-popover .icon-body .el-input--medium .el-input__inner {
  background: transparent !important;
  border: 1px solid rgba(0, 225, 228, 0.4) !important;
  color: #fff;
}

#app.dark-theme ~ .el-popover .icon-body .icon-list > div {
  color: #fff !important;
}

#app.dark-theme .el-input__inner, #app.dark-theme ~ .el-dialog__wrapper .el-input__inner, #app.dark-theme ~ .el-dialog__wrapper .el-textarea__inner {
  color: #fff !important;
}

/* 滚动条上的滚动滑块 */
#app.dark-theme ~ .el-popover ::-webkit-scrollbar-thumb {
  background-color: #102471;
  border-radius: 32px;
}

/* 滚动条轨道 */
#app.dark-theme ~ .el-popover ::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 32px;
}

body {
  .tribute-container {
    background: rgba(0, 0, 0, .1);
    color: #fff;
    padding: 10px;

    ul {
      list-style: none;
    }
  }
}
